<%extends"admin/base.html"%><%block content%>
<style>
    .layui-card-body{
        overflow: hidden;
    }
</style>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md12 layui-sm-12">
    <div class="layui-col-md12 layui-sm-12">
        <div class="layui-card">
            <div class="layui-card-header">用户访问报表</div>
            <div class="layui-card-body">
                <div class="layui-col-md6 layui-col-sm-12">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-pv-uv-line">
                      <div carousel-item id="LAY-pv-uv-line">
                        <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                      </div>
                    </div>
                </div>
                <div class="layui-col-md6 layui-col-sm-12">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-top5-ip-bar">
                      <div carousel-item id="LAY-top5-ip-bar">
                        <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                      </div>
                    </div>
                </div>
                <div class="layui-col-md12 layui-col-sm-12">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-history-pv-uv-line">
                      <div carousel-item id="LAY-history-pv-uv-line">
                        <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12 layui-sm-12">
        <div class="layui-card">
            <div class="layui-card-header">浏览器、操作系统分布</div>
            <div class="layui-card-body">
                <div class="layui-col-md6 layui-col-sm-12">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-brower-pie">
                        <div carousel-item id="LAY-brower-pie">
                            <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6 layui-col-sm-12">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-operating-system-pie">
                        <div carousel-item id="LAY-operating-system-pie">
                            <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12 layui-col-sm-12">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-ipaddress_map">
                        <div carousel-item id="LAY-ipaddress_map">
                            <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12 layui-sm-12">
        <div class="layui-card">
            <div class="layui-card-header">实时服务器监控</div>
            <div class="layui-card-body">
                <div class="layui-col-md6 layui-col-sm-12">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-cpu-line">
                  <div carousel-item id="LAY-cpu-line">
                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                  </div>
                </div>
                </div>
                <div class="layui-col-md6 layui-col-sm12">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-memory-line">
                  <div carousel-item id="LAY-memory-line">
                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                  </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%endblock%>
<%block script%>
    a = (layui.carousel,
        layui.echarts)
    //初始化
    function init(id,func,label,data){
        n = $("#"+id).children("div")[0]
        t = a.init(n, layui.echartsTheme);
        t.setOption(func(label,data));
        window.onresize = t.resize
    }
    //PV、UV
    var pv_uv_line_label=<< pv_uv_line_label.label | safe >>;
    var pv_uv_line_data=<< pv_uv_line_label | safe >>;
    function pv_uv_line_function(label,data){
        var option={
            title: {text: "今日流量趋势"},
            tooltip: {trigger: "axis"},legend: {orient:"vertical",x:"right",data:["PV","UV"]},xAxis:[{type: "category",boundaryGap: !1,data: label}],
            yAxis: [{type: "value"}],
            series: [{name: "PV",type: "line",smooth: !0,itemStyle: {normal: {areaStyle: {type: "default"}}},data:  data.pv},
                {name: "UV",type: "line",smooth: !0,itemStyle: {normal: {areaStyle: {type: "default"}}},data: data.uv
            }]
        }
        return option
    }
    init('LAY-pv-uv-line',pv_uv_line_function,pv_uv_line_label,pv_uv_line_data)
    //PV、UV
    var history_pv_uv_line_label=<< history_pv_uv_line_label.label | safe >>;
    var history_pv_uv_line_data=<< history_pv_uv_line_label | safe >>;
    function history_pv_uv_line_function(label,data){
        var option={
            title: {text: "历史流量趋势"},
            tooltip: {trigger: "axis"},legend: {orient:"vertical",x:"right",data:["PV","UV"]},xAxis:[{type: "category",boundaryGap: !1,data: label}],
            yAxis: [{type: "value"}],
            dataZoom: {show: !0,realtime: !0,start: 90,end: 100},
            series: [{name: "PV",type: "line",smooth: !0,itemStyle: {normal: {areaStyle: {type: "default"}}},data:  data.pv},
                {name: "UV",type: "line",smooth: !0,itemStyle: {normal: {areaStyle: {type: "default"}}},data: data.uv
            }]
        }
        return option
    }
    init('LAY-history-pv-uv-line',history_pv_uv_line_function,history_pv_uv_line_label,history_pv_uv_line_data)
    //TOP5 IP榜单
    var top5_ip_bar_label=<< top5_ip_bar.label | safe >>;
    var top5_ip_bar_data=<< top5_ip_bar.data >>;
    function top5_ip_bar_function(label,data){
        var option={
            title: {text: "TOP5 IP榜单"},
            tooltip: {trigger: "axis"},
            calculable: !0,
            xAxis: [{type: "value"}],
            yAxis: [{type: "category",data:label,axisLabel: {interval:0,rotate:40}}],
            series: [{name: "IP",type: "bar",data: data,itemStyle: {normal: {label: {show: true,position: 'right',textStyle:{color: 'black',fontSize:16}}}}}]
        }
        return option
    }
    init('LAY-top5-ip-bar',top5_ip_bar_function,top5_ip_bar_label,top5_ip_bar_data);
    //浏览器分布
    var brower_pie_label=<< brower_pie.label | safe >>;
    var brower_pie_data=<< brower_pie.data | safe >>;
    function brower_pie_function(label,data){
        var option={
            title: {text: "访客浏览器分布"},
            tooltip: {trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)"},
            legend: {orient: "vertical", x: "right", data:label},
            series: [{name: "浏览器来源",type: "pie",radius: "55%",center: ["50%", "50%"],data:data}]
        }
        return option
    }
    init('LAY-brower-pie',brower_pie_function,brower_pie_label,brower_pie_data)
    //操作系统分布
    var system_pie_label=<< system_pie.label | safe >>;
    var system_pie_data=<< system_pie.data | safe >>;
    function system_pie_function(label,data){
        var option={
            title: {text: "操作系统分布"},
            tooltip: {trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)"},
            legend: {orient: "vertical", x: "right", data:label},
            series: [{name: "操作系统来源",type: "pie",radius: "55%",center: ["50%", "50%"],data: data}]
        }
        return option
    }
    init('LAY-operating-system-pie',system_pie_function,system_pie_label,system_pie_data)
    //城市分布
    var ipaddress_map_data=<< ipaddress_map.data | safe >>;
    function ipaddress_map_function(data){
        var option={
            title: {text: "国家分布"},
            tooltip: {trigger: "item"},
            dataRange: {orient: "horizontal",min:0,max: 1e3,text: ["高", "低"],splitNumber: 0},
            series: [{name: "国家",type: "map",mapType: "world",mapLocation: {x: "center"},
                selectedMode: "multiple",itemStyle: {normal: {label: {show: 0}},emphasis: {label: {show: !0}}},
                data: data
            }]
        }
        return option
    }
    init('LAY-ipaddress_map',ipaddress_map_function,ipaddress_map_data)
    // cpu
    var cpu_line_option={
        title: {text: "CPU实时动态"},
        tooltip: {formatter: '{a} <br/>{b} : {c}%'},
        toolbox: {feature: {restore: {},saveAsImage: {}}},
        series: [{name: 'CPU',type: 'gauge',detail: {formatter: '{value}%'},data: [{value: 0, name: 'CPU使用率'}]}]
    };
    var cpu_line_chart = a.init($("#LAY-cpu-line").children("div")[0], layui.echartsTheme);
    // memory
    var memory_line_option={
        title: {text: "内存实时动态"},
        tooltip: {formatter: '{a} <br/>{b} : {c}%'},
        toolbox: {feature: {restore: {},saveAsImage: {}}},
        series: [{name: 'CPU',type: 'gauge',detail: {formatter: '{value}%'},data: [{value: 0, name: '内存使用率'}]}]
    };
    var memory_line_chart = a.init($("#LAY-memory-line").children("div")[0], layui.echartsTheme);
    function cpu_memory_info(){
        $.ajax({
            url:"<< url_for('admin.MonitorInfo') >>",
            dataType:'json',
            success:function(res){
                cpu_line_option.series[0].data[0].value = res.cpu;
                memory_line_option.series[0].data[0].value = res.memory;
                cpu_line_chart.setOption(cpu_line_option);
                memory_line_chart.setOption(memory_line_option);
            }
        });
    }
    cpu_memory_info();
    setInterval(function(){cpu_memory_info()},5000);
    $('.layui-nav-child dd').removeClass('layui-this');
    $('#view_admin_monitor').addClass('layui-this');
    $('.layui-nav-tree li').removeClass('layui-nav-itemed');
    $('#admin_system_nav').addClass('layui-nav-itemed');
<%endblock%>
